<template>
  <div>
    <div class="time-item">
      <CloudTimePicker use12-hours @change="onChange" />
    </div>
    <div class="time-item">
      <CloudTimePicker use12-hours format="h:mm:ss A" @change="onChange" />
    </div>
    <div class="time-item">
      <CloudTimePicker use12-hours format="h:mm a" @change="onChange" />
    </div>
  </div>
</template>

<script>
  export default {
    title: '1.12 小时制',
    subTitle: '12 小时制的时间选择器，默认的 format 为 h:mm:ss a。',
    data () {
      return {
        value: ''
      }
    },
    methods: {
      onChange (time, timeString) {
        console.log(time, timeString);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .time-item {
    padding-bottom: 10px;
  }
</style>